<template>
  <div class="BannerManagement">
    <el-card>
      <el-button class="btn" @click="add">新增Banner</el-button>
      <el-table :data="tableData" style="width: 100%">
        <el-table-column prop="sort" label="序号"> </el-table-column>
        <el-table-column prop="resource" label="Banner">
          <template slot-scope="scope">
            <el-image
              style="width: 200px; height: 100px"
              :src="scope.row.resource"
              :preview-src-list="[scope.row.resource]"
            >
            </el-image>
          </template>
        </el-table-column>
        <el-table-column prop="online_date" label="上架时间"> </el-table-column>
        <el-table-column prop="offline_date" label="下架时间">
        </el-table-column>
        <el-table-column prop="jump_type" label="跳转类型">
          <template slot-scope="scope">
            {{
              scope.row.jump_type == 1
                ? "不跳转"
                : scope.row.jump_type == 5
                ? "内部跳转"
                : "H5跳转"
            }}
          </template>
        </el-table-column>
        <el-table-column prop="remark" label="备注"> </el-table-column>
        <el-table-column prop="address" label="管理">
          <template slot-scope="scope">
            <el-button size="small" @click="edit(scope.row)" plain
              >编辑</el-button
            >
            <el-button type="info" size="small" @click="off(scope.row.id)" plain
              >下架</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <pagination
        v-show="total > 0"
        :total="total"
        :page.sync="page"
        :limit.sync="pageSize"
        @pagination="getList"
      />
    </el-card>
    <el-dialog
      title="新增Banner"
      :visible.sync="centerDialogVisible"
      width="30%"
      center
    >
      <!-- :rules="rules" -->
      <el-form
        ref="form"
        :model="form"
        label-width="100px"
        label-position="right"
      >
        <el-form-item label="排序" prop="sort">
          <el-input
            @change="inputChange"
            style="width: 90%"
            v-model="form.sort"
          ></el-input>
        </el-form-item>
        <el-form-item label="上架时间" prop="online_date">
          <el-date-picker
            v-model="form.online_date"
            type="date"
            placeholder="选择日期"
            format="yyyy-MM-dd"
            value-format="yyyy-MM-dd"
          >
          </el-date-picker>
        </el-form-item>
        <el-form-item label="下架时间" prop="offline_date">
          <el-date-picker
            v-model="form.offline_date"
            type="date"
            placeholder="选择日期"
            format="yyyy-MM-dd"
            value-format="yyyy-MM-dd"
          >
          </el-date-picker>
        </el-form-item>
        <el-form-item label="Banner图片" prop="resource">
          <el-upload
            class="avatar-uploader"
            :http-request="upLoad"
            :on-success="handleAvatarSuccess"
            :show-file-list="false"
            action
          >
            <img
              v-if="form.img"
              :src="form.img"
              class="avatar"
              style="width: 350px; height: 180px"
            />
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
        </el-form-item>
        <el-form-item label="跳转类型" prop="jump_type">
          <el-radio v-model="form.jump_type" label="1">不跳转</el-radio>
          <el-radio v-model="form.jump_type" label="5">内部跳转</el-radio>
          <el-radio v-model="form.jump_type" label="10">H5跳转</el-radio>
        </el-form-item>
        <el-form-item
          label="ios跳转"
          prop="jump_ios"
          v-if="form.jump_type == 5"
        >
          <el-input style="width: 90%" v-model="form.jump_ios"></el-input>
        </el-form-item>
        <el-form-item
          label="android跳转"
          prop="jump_android"
          v-if="form.jump_type == 5"
        >
          <el-input style="width: 90%" v-model="form.jump_android"></el-input>
        </el-form-item>
        <el-form-item label="H5地址" prop="jump_h5" v-if="form.jump_type == 10">
          <el-input style="width: 90%" v-model="form.jump_h5"></el-input>
        </el-form-item>
        <el-form-item label="备注描述" prop="remark">
          <el-input style="width: 90%" v-model="form.remark"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="centerDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="submit">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import Pagination from "@/components/Pagination"; // 分页
import { client } from "@/utils/oss.js";
import { ossToken } from "@/api/NotificationManagement";
import {
  bannerAdd,
  bannerList,
  bannerSetBannerStatus,
} from "@/api/operationManagement";
export default {
  components: { Pagination },
  data() {
    return {
      tableData: [],
      total: 0,
      page: 1,
      pageSize: 10,
      centerDialogVisible: false,
      form: {
        resource: "",
        img: "",
        width: "0",
        height: "0",
        resource_type: "1",
        jump_type: "1",
        jump_android: "",
        jump_ios: "",
        jump_h5: "",
        sort: "",
        remark: "",
        app_type: "1",
        id: "",
        online_date: "",
        offline_date: "",
      },
      rules: [],
    };
  },
  methods: {
    add() {
      this.form.id = "0";
      this.centerDialogVisible = true;
    },
    edit(obj) {
      //   this.form = JSON.parse(JSON.stringify(obj));
      this.form.id = obj.id;
      this.form.jump_android = obj.jump_android;
      this.form.jump_h5 = obj.jump_h5;
      this.form.jump_ios = obj.jump_ios;
      this.form.jump_type = obj.jump_type;
      this.form.offline_date = obj.offline_date;
      this.form.online_date = obj.online_date;
      this.form.remark = obj.remark;
      this.form.resource = obj.resource;
      this.form.status = obj.status;
      this.form.sort = obj.sort;
      this.form.img = obj.resource;
      this.centerDialogVisible = true;
    },
    off(id) {
      this.$confirm("是否下架此Banner?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(async () => {
          const res = await bannerSetBannerStatus({
            id,
            status: "10",
          });
          if (res.code == 0) {
            this.$message({
              type: "success",
              message: "下架成功!",
            });
            this.getList();
          }
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消",
          });
        });
    },
    //排序检测
    inputChange(value) {
      let bol = this.tableData.some((item) => {
        return value == item.sort;
      });
      if (bol) {
        this.$message({
          type: "error",
          message: "输入序号与现有序号冲突，请重新输入！",
        });
        this.form.id = "";
      }
    },
    handleAvatarSuccess(res, file) {
      //   this.form.img = URL.createObjectURL(file.raw);
      this.form.img = "";
      this.$set(this.form, "img", URL.createObjectURL(file.raw));
    },
    //覆盖默认的上传行为，自定义上传的实现
    async upLoad(file) {
      await ossToken({
        type: 0,
      }).then((res) => {
        if (res.code == 0) {
          this.dataObj = {
            accessKeyId: res.data.accessKey,
            accessKeySecret: res.data.accessSecret,
            securityToken: res.data.token,
            region: "oss-cn-hangzhou",
            bucket: res.data.bucket,
          };
        }
      });
      const self = this;
      let files = file.file,
        point = files.name.lastIndexOf("."),
        suffix = files.name.substr(point),
        fileName = files.name.substr(0, point),
        date = Date.parse(new Date()),
        // fileNames = "/img/" + file.file.name;
        fileNames =
          "/img/" +
          Math.round(new Date() / 1000) +
          "." +
          file.file.name.substring(file.file.name.lastIndexOf(".") + 1);
      console.log(fileNames);
      // console.log(file.file.name.substring(file.file.name.lastIndexOf(".")+1));
      //fileNames上传文件的名称
      //file.file上传文件的内容
      client(this.dataObj)
        .multipartUpload(fileNames, file.file)
        .then((result) => {
          this.form.resource = fileNames;
          //下面是如果对返回结果再进行处理，根据项目需要
          self.$message({
            message: "上传成功",
            type: "success",
          });
        })
        .catch((err) => {
          self.$message.error("上传失败");
        });
    },
    async getList() {
      const res = await bannerList({
        page: this.page,
        pageSize: this.pageSize,
        app_type: "1",
      });
      if (res.code == 0) {
        this.tableData = res.data.list;
        this.total = res.data.total;
      }
    },
    async submit() {
      const res = await bannerAdd(this.form);
      if (res.code == 0) {
        this.$message({
          type: "success",
          message: "添加成功！",
        });
        this.centerDialogVisible = false;
        this.getList();
      }
    },
  },
  created() {
    this.getList();
  },
};
</script>

<style lang="less" scoped>
.BannerManagement {
  padding: 20px;
  .el-icon-plus {
    display: inline-block;
    width: 350px;
    line-height: 180px;
    height: 180px;
    border: 1px dashed #ccc;
  }
  .avatar {
    width: 350px;
    height: 180px;
    display: block;
  }
}
</style>